<template>
  <el-container style="flex-direction:column;">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="出售中产品" name="1"></el-tab-pane>
      <el-tab-pane label="待上架产品" name="0"></el-tab-pane>
    </el-tabs>
    <el-form :inline="true" :model="formInline" :rules="rules" ref="ruleForm" size="mini" class="demo-form-inline">
      <el-form-item label prop="commodityName">
        <el-input v-model="formInline.commodityName" placeholder="请输入名称搜索"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-select clearable v-model="formInline.storeId" placeholder="请选择门店">
          <el-option
            v-for="item in storeList"
            :key="item.storeId"
            :label="item.name"
            :value="item.storeId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="success" icon="el-icon-search" @click="onSubmit">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" icon="el-icon-refresh-left" @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row style="padding-bottom: 10px;">
      <el-button type="primary" size="mini" icon="el-icon-plus" @click="addClick">新增</el-button>
      <el-button
        type="success"
        size="mini"
        icon="el-icon-edit"
        :disabled="multipleSelection.length !== 1"
        @click="handleEdit(null, multipleSelection[0])"
      >修改</el-button>
    </el-row>
    <el-table
      @selection-change="selectionChange"
      :data="commodityData.records"
      size="mini"
      style="width: 100%"
    >
      <el-table-column align="center" header-align="center" type="selection" width="55"></el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        prop="commodityName"
        width="100"
        label="商品名称"
      ></el-table-column>
      <el-table-column align="center" header-align="center" prop="image" label="商品图片">
        <template slot-scope="scope">
          <img
            :src="scope.row.image ? baseURL + scope.row.image : '#'"
            style="width: 32px;height: 32px;;border-radius: 16px;"
          />
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" prop="name" label="所属门店"></el-table-column>
      <el-table-column align="center" header-align="center" prop="price" label="商品价格"></el-table-column>
      <el-table-column align="center" header-align="center" prop="sales" label="销量"></el-table-column>
      <el-table-column align="center" header-align="center" prop="stock" label="库存"></el-table-column>
      <el-table-column align="center" header-align="center" prop="isShow" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isShow == 1">上架中</el-tag>
          <el-tag v-else type="warning">待上架</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" prop="sort" label="排序"></el-table-column>
      <el-table-column label="操作" width="160" align="center" header-align="center" fixed="right">
        <template slot-scope="scope">
          <el-button
            style="margin-right:3px;"
            size="mini"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
            icon="el-icon-edit"
          ></el-button>
          <el-popconfirm
            placement="top"
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-delete"
            icon-color="red"
            title="确定删除本条数据吗？"
            @confirm="handleDelete(scope.$index, scope.row)"
          >
            <el-button size="mini" slot="reference" type="danger" icon="el-icon-delete"></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 8px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="commodityData.current"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="commodityData.size"
      layout="total, prev, pager, next, sizes,jumper"
      :total="commodityData.total"
    ></el-pagination>
  </el-container>
</template>
<script>
import { baseURL } from '@/utils/setting.js'
import {getUserHaveOrBelongToStore} from '@/api/modules/StoreManagement/storeList.js'
import {getPagingCommodity,deleteCommodity} from '@/api/modules/CommodityManagement/manageGoods.js'
export default {
  data() {
    return {
      activeName: "1",
      formInline: {
        commodityName: '',
        storeId:''
      },
      storeList:[],
      multipleSelection: [],
      commodityData:{},
      size: 5,
      current:1,
      rules: {
        commodityName:[
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ]
      },
    }
  },
  computed: {
    baseURL() { return baseURL },
  },
  created() {
    this.getUserHaveOrBelongToStore()
    this.getPagingCommodity()
  },
  methods: {
    //add按钮
    addClick() {
      this.$router.push({ path: `/commodityManagement/goodsAdd` })
    },
    //el-tabs选择事件
    handleClick() {
      this.getPagingCommodity()
    },
    onSubmit() {
      this.getPagingCommodity();
    },
    onReset() {
      this.$refs["ruleForm"].resetFields();
      this.formInline.storeId = ""
      this.getPagingCommodity();
    },
    handleEdit(index, row) {
      // console.log(index, row);
      this.$router.push({ path: `/commodityManagement/goodsUpdate/${row.commodity}` })
    },
    handleDelete(index, row) {
      // console.log(index, row);
      deleteCommodity({commodity:row.commodity}).then(()=>{
        this.getPagingCommodity()
      })
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.size = val
      this.getPagingCommodity()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.current = val
      this.getPagingCommodity()
    },
    selectionChange(val) {
      this.multipleSelection = val;
    },
    getUserHaveOrBelongToStore(){
      getUserHaveOrBelongToStore().then(res=>{
        this.storeList = res.data.data
      })
    },
    getPagingCommodity(){
      let commodityPagingDTO = {
        current : this.current,
        size: this.size,
        commodityName : this.formInline.commodityName,
        storeId: this.formInline.storeId,
        isShow: parseInt(this.activeName),
      }
      getPagingCommodity({commodityPagingDTO:JSON.stringify(commodityPagingDTO)}).then(res=>{
        this.commodityData = res.data.data
      })
    }
  }
}
</script>

<style>
</style>